import React, { Component } from 'react'

// ********** 在函数式组件中可以使用参数进行接收 props
const Header = function(props){
    // 在函数式组件中 没有 this ，我们不能使用
    // console.log(this);

    console.log(props);
    return (<>
        <div> 头部 --- {props.name} ----- {props.age + 10} </div>
    </>)
}

// **********  在类组件中，属性传值可以通过 this.props 进行接收
class Content extends Component {

    render(){
        // console.log(this.props.title);

        return (<>
            <div>
                内容部分 -- { this.props.title }
            </div>
        </>)
    }
}

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 通过属性的方式将值传递到子组件中 */}
        {/* 在 vue 中父组件给子组件传值的时候，只要不是纯字符串都需要加一个 : */}
        {/* 在 react 中父组件给子组件传值的时候，只要不是纯字符串都需要使用 {} 进行包裹 */}
        <Header name='H5-2303' age={10} sex={true} obj={{name: '高举', age: 18,sex: '男'}} />
        <Content title='一个大大的标题' />
      </div>
    )
  }
}
